<template>
  <div class="hospital-detail">
    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-left" @click="goBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M15 18L9 12L15 6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <div class="header-right" @click="closeDetail">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M18 6L6 18M6 6L18 18" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
    </div>

    <!-- 医院图片 -->
    <div class="hospital-image">
      <img :src="hospitalData.image || '/src/views/sow/9957.jpg_wh860.jpg'" alt="医院图片" />
    </div>

    <!-- 医院信息卡片 -->
    <div class="hospital-info-card">
      <!-- 医院基本信息 -->
      <div class="hospital-basic-info">
        <h1 class="hospital-name">{{ hospitalData.name || '首都医科大学附属北京天坛医院最多显示两行' }}</h1>
        <div class="hospital-rating">
          <div class="stars">
            <span v-for="i in 5" :key="i" class="star" :class="{ filled: i <= Math.floor(hospitalData.rating || 4.8) }">★</span>
            <span class="rating-text">{{ hospitalData.rating || '4.8' }} ({{ hospitalData.reviewCount || '456' }}条评价)</span>
          </div>
        </div>
      </div>

      <!-- 医院标签 -->
      <div class="hospital-tags">
        <span class="tag primary">医保新农</span>
      </div>

      <!-- 医院规格 -->
      <div class="hospital-specs">
        <div class="specs-title">医院规格</div>
        <div class="specs-grid">
          <div class="spec-item">
            <div class="spec-icon">🏠</div>
            <div class="spec-details">
              <div class="spec-value">3400</div>
              <div class="spec-label">病房 (间)</div>
            </div>
          </div>
          <div class="spec-item">
            <div class="spec-icon">👨‍⚕️</div>
            <div class="spec-details">
              <div class="spec-value">134</div>
              <div class="spec-label">医生 (人)</div>
            </div>
          </div>
          <div class="spec-item">
            <div class="spec-icon">💧</div>
            <div class="spec-details">
              <div class="spec-value">3300</div>
              <div class="spec-label">面积 (平方千米)</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 医院信息 -->
      <div class="hospital-info-section">
        <div class="info-title">医院信息</div>
        
        <!-- 地址信息 -->
        <div class="info-item">
          <div class="info-icon-wrapper">
            <div class="info-icon location">🌍</div>
          </div>
          <div class="info-content">
            <div class="info-label">地址</div>
            <div class="info-value">{{ hospitalData.address || '北京市丰台区南四环西路119号' }}</div>
          </div>
        </div>

        <!-- 上班时间 -->
        <div class="info-item">
          <div class="info-icon-wrapper">
            <div class="info-icon time">🌐</div>
          </div>
          <div class="info-content">
            <div class="info-label">上班时间</div>
            <div class="working-schedule">
              <div class="schedule-item">
                <span class="schedule-day">周一至周五:</span>
              </div>
              <div class="schedule-time">上午 8:00-12:00 & 下午 13:00-20:00</div>
              <div class="schedule-item">
                <span class="schedule-day">周六、周日:</span>
              </div>
              <div class="schedule-time">上午 8:00-12:00 & 下午 13:00-20:00</div>
            </div>
          </div>
        </div>

        <!-- 标签页 -->
        <div class="tabs">
          <div class="tab-buttons">
            <button 
              v-for="tab in tabs" 
              :key="tab.key"
              class="tab-button"
              :class="{ active: activeTab === tab.key }"
              @click="activeTab = tab.key"
            >
              {{ tab.label }}
            </button>
          </div>
        </div>

        <!-- 医院简介内容 -->
        <div class="hospital-description" v-if="activeTab === 'intro'">
          <p>{{ hospitalDescription }}</p>
        </div>
        
        <!-- 医院科室内容 -->
        <div class="hospital-departments" v-if="activeTab === 'departments'">
          <p>医院科室信息正在完善中...</p>
        </div>
        
        <!-- 评价内容 -->
        <div class="hospital-reviews" v-if="activeTab === 'reviews'">
          <p>用户评价信息正在完善中...</p>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-button">
      <button class="appointment-btn" @click="makeAppointment">
        下一步
      </button>
    </div>
    
    <!-- 预约弹出框 -->
    <AppointmentModal
      :visible="showAppointmentModal"
      @close="showAppointmentModal = false"
      @appointmentTime="handleAppointmentTime"
      @appointmentDoctor="handleAppointmentDoctor"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import AppointmentModal from './AppointmentModal.vue'

const router = useRouter()

// 响应式数据
const hospitalData = ref<any>({})
const activeTab = ref('intro')
const showAppointmentModal = ref(false)

const tabs = [
  { key: 'intro', label: '医院简介' },
  { key: 'departments', label: '医院科室' },
  { key: 'reviews', label: '评价' }
]

const hospitalDescription = ref(`首都医科大学附属北京天坛医院始建于1956年8月23日，是一所以神经外科为先导，以神经科学集群为特色，集医疗、教学、科研、预防为一体的三级甲等综合医院，是国家神经系统疾病临床医学研究中心、国家神经系统疾病质量控制中心、国家神经系统疾病医疗质量管理与控制中心、国家卫生健康委脑卒中防治工程委员会、世界卫生组织脑卒中防治工作中心，北京脑重大疾病研究院所在地。

首都医科大学附属北京天坛医院始建于1956年8月23日，是一所以神经外科为先导，以神经科学集群为特色，集医疗、教学、科研、预防为一体，是国家神经系统疾病临床医学研究中心。`)

// 方法
const goBack = () => {
  router.back()
}

const closeDetail = () => {
  router.push('/hospital-select')
}

const makeAppointment = () => {
  // 显示预约弹出框
  showAppointmentModal.value = true
}

// 处理预约时间
const handleAppointmentTime = () => {
  showAppointmentModal.value = false
  // 跳转到时间选择页面
  router.push('/time-select')
}

// 处理预约医生
const handleAppointmentDoctor = () => {
  showAppointmentModal.value = false
  // 跳转到医生选择页面
  router.push('/doctor-select')
}

// 生命周期
onMounted(() => {
  // 从 localStorage 获取医院数据
  const storedData = localStorage.getItem('selectedHospital')
  if (storedData) {
    hospitalData.value = JSON.parse(storedData)
  }
})
</script>

<style scoped>
.hospital-detail {
  min-height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
}

.header-left,
.header-right {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
}

/* 医院图片 */
.hospital-image {
  width: 100%;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.hospital-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 医院信息卡片 */
.hospital-info-card {
  background: white;
  margin-top: -20px;
  border-radius: 20px 20px 0 0;
  padding: 24px 20px;
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 280px);
}

/* 医院基本信息 */
.hospital-basic-info {
  margin-bottom: 16px;
}

.hospital-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hospital-rating {
  display: flex;
  align-items: center;
}

.stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.star {
  color: #ddd;
  font-size: 14px;
}

.star.filled {
  color: #ffd700;
}

.rating-text {
  margin-left: 8px;
  font-size: 14px;
  color: #666;
}

/* 医院标签 */
.hospital-tags {
  margin-bottom: 20px;
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.tag.primary {
  background-color: #e3f2fd;
  color: #1976d2;
}

/* 医院规格 */
.hospital-specs {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.specs-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.specs-grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.spec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.spec-icon {
  font-size: 20px;
  color: #1976d2;
}

.spec-details {
  display: flex;
  flex-direction: column;
}

.spec-value {
  font-size: 16px;
  font-weight: 600;
  color: #1976d2;
  line-height: 1.2;
}

.spec-label {
  font-size: 12px;
  color: #666;
  line-height: 1.2;
  margin-top: 2px;
}

/* 医院信息 */
.hospital-info-section {
  margin-bottom: 24px;
}

.info-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  gap: 12px;
}

.info-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.info-icon {
  font-size: 18px;
}

.info-icon.location {
  color: #1976d2;
}

.info-icon.time {
  color: #1976d2;
}

.info-content {
  flex: 1;
}

.info-label {
  font-size: 14px;
  font-weight: 500;
  color: #1976d2;
  margin-bottom: 4px;
}

.info-value {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

/* 工作时间 */
.working-schedule {
  margin-top: 4px;
}

.schedule-item {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 2px;
}

.schedule-time {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .hospital-info-card {
    padding: 20px 16px;
  }
  
  .specs-grid {
    gap: 12px;
  }
  
  .spec-item {
    gap: 6px;
  }
  
  .spec-value {
    font-size: 14px;
  }
  
  .spec-label {
    font-size: 11px;
  }
}


/* 标签页 */
.tabs {
  margin-bottom: 20px;
}

.tab-buttons {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
}

.tab-button {
  flex: 1;
  padding: 12px 0;
  background: none;
  border: none;
  font-size: 16px;
  color: #666;
  cursor: pointer;
  position: relative;
  transition: color 0.3s;
}

.tab-button.active {
  color: #1976d2;
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background-color: #1976d2;
}

/* 医院简介 */
.hospital-description {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 80px;
}

/* 底部按钮 */
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 20px;
  background: white;
  border-top: 1px solid #f0f0f0;
  z-index: 1000;
}

.appointment-btn {
  width: 100%;
  height: 48px;
  background: #1976d2;
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.appointment-btn:hover {
  background: #1565c0;
}

.appointment-btn:active {
  background: #0d47a1;
}
</style>